<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div ref="node">
                <div v-for="item in list">{{item}}</div>
            </div>
            <button @click="add">点击</button>
        </div>
        <script>
            let app = new Vue({
                el: '#app',
                data() {
                    return {
                        list: ['蜘蛛侠', '钢铁侠', '猪猪侠', '闪电侠']
                    };
                },
                mounted() {
                    console.log(this.$refs.node.clientHeight, '列表高度');
                },
                methods: {
                    add() {
                        // push的动作，意味修改数据
                        this.list.push('蝙蝠侠');
                        // Vue的特点： 渲染节点是一个异步的操作
                        // 获取出来的高度是在渲染了dom之前
                        // 如何解决：获取数据更新后的dom节点
                        // nextTick()
                        // console.log(this.$refs.node.clientHeight, '列表高度');
                        this.$nextTick(() => {
                            // 获取数据更新后的节点
                            console.log(this.$refs.node.clientHeight, '列表高度');
                        });
                    }
                }
            });
        </script>
    </body>
</html>
